<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/nav.css">
    <link rel="stylesheet" href="__CSS__/vip_buy.css">
    <title>VIP</title>
</head>
<body>
    <div class="vip-box">
        {volist name="data" id="vo"}
        <div class="vip-item">
           <div class="item-content" style="background: url('__IMG__/card/vip{$vo.level}.png')">
               <p>
                   <span class="icon">
                       <span>LV{$vo.level}</span>{$vo.name}
                   </span>
                   <span>&yen;{$vo.price}</span>
               </p>
               <p>时间：永久有效</p>
               <p>权限：{$vo.desc}</p>
           </div>
            <button>立即购买</button>
        </div>
        {/volist}
    </div>
    <div class="clue center_absolute">
        <p>温馨提示</p>
        <p>尊敬的会员：您现在即将升级高级会员，如您以后想升级更高级别的会员，需重新购买，无法补差价哦</p>
        <p>您不能享受团队管理收益10元躺赚奖励</p>
        <div>
            <a class="no">取消</a>
            <a class="yes">确定</a>
        </div>
    </div>
    <div class="vip_buy">
        <div class="vip_buy-title">
            <img class="close" src="__IMG__/close.png">
            <p>会员购买</p>
        </div>
        <div class="vip_buy-content">
            <p>&yen;198.00</p>
            <p>购买项目 <span>高级会员</span></p>
        </div>
        <div class="vip_buy-checked">
            <p>选择支付方式</p>
            <p>
                <span><img src="__IMG__/wechat.png" alt="">微信</span>
                <span>
                    <img src="__IMG__/checked1.png"  class="wechat-checked" alt="">

                </span>
            </p>
            <button class="btn-buy">立即购买</button>
        </div>
    </div>
    <div class="mask"></div>
    {include file="footer" /}
</body>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/layer.js"></script>
<script type="text/javascript">
    $('.vip-item').click(()=>{
        $(".mask").css("height",$(document).height());
        $(".mask").css("width",$(document).width());
        $(".mask").show();
        $('.clue').css('display','block');

    });
    $('.clue .no').click(()=>{
        $('.clue').css('display','none');
        $(".mask").hide();
    });
    $('.clue .yes').click(()=>{
        $('.clue').css('display','none');
        $(".mask").css("height",$(document).height());
        $(".mask").css("width",$(document).width());
        $(".mask").show();
        $('.vip_buy').css('display','block');
    });
    $('.close').click(()=>{
        $('.vip_buy').css('display','none');
        $(".mask").hide();
    });
    $('.wechat-checked').click(()=>{
        var src=$('.wechat-checked').attr('src');
        console.log(src);
        if(src=='__IMG__/checked1.png'){$('.wechat-checked').attr('src','__IMG__/checked.png');}
        else if(src=='__IMG__/checked.png'){$('.wechat-checked').attr('src','__IMG__/checked1.png');}
    });
    $('.btn-buy').click(()=>{
        var src=$('.wechat-checked').attr('src');
        if(src=='__IMG__/checked.png'){
            location.href='index.html'
        }else{
            layer.msg("请选择支付方式",{time:1500});
        }
    });
</script>
</html>